<!--
 * @Author: lide1202@hotmail.com
 * @Date: 2021-3-13 11:04:24
 * @Last Modified by:   lide1202@hotmail.com
 * @Last Modified time: 2021-3-13 11:04:24
 !-->
<template>
  <div id="text-plus-div" :class="textClass" :style="styleColor">{{ styleColor.text }}</div>
</template>

<script>

export default {
  name: "WidgetTextPlus",
  components: {},
  props: {
    value: Object,
    ispreview: Boolean
  },
  data() {
    return {
      options: {},
      optionsData: {},
      optionsSetup: {},
      //动画数据
      animateName:'none',
      animateDuration: 1,
      animateRepeat: 1,
      animateDelay:1
     
    };
  },
  computed: {
    transStyle() {
      return this.objToOne(this.options);
    },
    styleColor() {
      return {
        position: this.ispreview ? "absolute" : "static",
        color: this.transStyle.color,
        "font-weight": this.transStyle.fontWeight,
        text: this.transStyle.text,
        "--text": this.transStyle.text,
        "font-size": this.transStyle.fontSize + "px",
        "letter-spacing": this.transStyle.letterSpacing + "em",
        background: this.transStyle.background,
        "text-align": this.transStyle.textAlign,
        width: this.transStyle.width + "px",
        height: this.transStyle.height + "px",
        left: this.transStyle.left + "px",
        top: this.transStyle.top + "px",
        right: this.transStyle.right + "px",        
        "--animate-duration": this.animateDuration + "s",
        "--animate-repeat":this.animateRepeat,
        "--animate-delay":this.animateDelay + "s"
      };
    },
    textClass(){
       //return `text`
       
      return `text animate__animated animate__${this.animateName}  animate__delay-1s animate__repeat-1 ${this.transStyle.textStyle}`
    }
    
  },
  watch: {
    value: {
      handler(val) {
        this.options = val;
        this.optionsData = val.data;
        this.optionsSetup = val.setup;
        this.editorOptions();
      },
      deep: true
    }
  },
  mounted() {
    this.options = this.value;
    this.optionsData = this.value.data;   
    this.optionsSetup = this.value.setup;
    this.editorOptions();
  },
  methods: {
    editorOptions(){      
      this.setOptionsData();
      this.setOptionsAnimate();
      this.setFieldListener();
    },
    setFieldListener(){
      if(!this.ispreview){
          return ;
       }
      const _this =this;
      const optionsSetup = this.optionsSetup;
      const fieldName = optionsSetup.fieldName;  
      if (!this.$bus._events[fieldName]) {       
          this.$bus.on(fieldName,(data) => {          
            _this.value.setup.text = data;
          });
      }
    },
    setOptionsAnimate(){
      const optionsSetup = this.optionsSetup;
      this.animateName =  optionsSetup.animateName;       
      this.animateDuration =  optionsSetup.animateDuration;
      this.animateRepeat =  optionsSetup.animateRepeat;
      this.animateDelay =  optionsSetup.animateDelay;
    },
    // 数据解析
    setOptionsData() {
        //设置动画效果
      const optionsData = this.optionsData; // 数据类型 静态 or 动态
      if (optionsData.dataType == "dynamicData") {
        this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
      } else {};
    },
    dynamicDataFn(val, refreshTime) {
      if (!val) return;
      if (this.ispreview) {
        this.getEchartData(val);
        this.flagInter = setInterval(() => {
          this.getEchartData(val);
        }, refreshTime);
      } else {
        this.getEchartData(val);
      }
    },
    getEchartData(val) {
      const data = this.queryEchartsData(val);
      data.then(res => {
        this.styleColor.text = res[0].value;
        this.$forceUpdate();
      });
    }
  }
};
</script>

<style scoped lang="scss">
.text {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#text-plus-div{position:relative;letter-spacing:.07em;font-size:5em;font-weight:normal;margin:0 auto}
#text-plus-div:before,#text-plus-div:after{position:absolute;top:0;left:0;right:0}
</style>
